<template>
  <div class="mymap" ref="map"></div>
</template>

<script>
import mapboxgl from "mapbox-gl";
import { LayerController } from "@/utils/LayerController/index";

mapboxgl.accessToken =
  "pk.eyJ1IjoidGhpYmF1dGciLCJhIjoiMzg5MzQzOGMwYTJmOGNlODRkYzJjMDc5ZDEwNjNkOTEifQ.YPJ4ALWlOKnLPeaS5Ose7g";

export default {
  data() {
    return {
      map: {},
      centerLngLat: [-96, 37.8],
      usStatesGeojson: {},
      LayerController: null,
    };
  },
  mounted() {
    this.initMap();
    this.addPopup();
  },
  methods: {
    initMap() {
      this.map = new mapboxgl.Map({
        container: this.$refs.map,
        style: "mapbox://styles/mapbox/streets-v11",
        center: this.centerLngLat,
        zoom: 3,
      });

      this.map.on("load", () => {
        this.onMapLoad();
      });
    },
    onMapLoad() {
      this.addCircleLayer();
    },
    addPopup() {
      const popup = new mapboxgl.Popup().setHTML("<h2>Hello</h2><p>Ca va</p>");
      const marker = new mapboxgl.Marker()
        .setLngLat(this.centerLngLat)
        .setPopup(popup);
      marker.addTo(this.map);
    },
    addCircleLayer() {
      this.LayerController = new LayerController({
        map: this.map,
      });
      let circleLayer = {
        id: "simulatedCircleLayer",
        type: "circle",
        source: {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                geometry: {
                  type: "Point",
                  coordinates: [-96, 37.8],
                },
                properties: {
                  title: "Simulated Circle",
                  description: "This is a simulated circle.",
                },
              },
            ],
          },
        },
        paint: {
          "circle-radius": 10,
          "circle-color": "rgba(255, 0, 0, 0.8)",
        },
      };
      this.LayerController.addLayer(circleLayer);
    },
  },
};
</script>

<style>
.mymap {
  height: 100vh;
  width: 100vw;
  margin: 0 auto;
  text-align: left;
}
</style>
